"use client";

export default function Page(){
  return (
      <table className={"border-separate border-spacing-5 mx-auto"}>
        <thead>
          <tr className={"bg-sky-500"}>
            <td className={"border p-5"}>state</td>
            <td className={"border p-5"}>city</td>
          </tr>
        </thead>
        <tbody>
        {
          [1,2,3,4,5].map( item =>{
            return <tr key={item} className={"odd:bg-stone-400 hover:even:bg-pink-500"}>
              <td className={"border p-5"}>
                indiana
              </td>
              <td className={"border p-5"}>
                indianapolis
              </td>
            </tr>
          })
        }
        </tbody>
      </table>
  )
}
